<template>
    <div class="content">
        <div class="category">
            <div 
               v-for="item in cateories" 
               :key="item.name"
               @click="() => handleCategoryClick(item.tab)"
                :class='{"category__item":true, "category__item--acttive":currentTab===item.tab}'
             >{{ item.name }}</div>
        </div>
        <div class="product">
            <div class="product__item" v-for="item in lists" :key="item._id">
                <img class="product__item__img" :src="item.imgUrl" alt="item.name" v-show="item.imgUrl">
                <div class="product__item__detail">
                    <h4 class="product__item__title">{{ item.name }}</h4>
                    <p class="product__item__sales">月销 {{ item.sales }} 件</p>
                    <p class="product__item__price">
                        <span class="product__item__yen">&yen;</span>{{ item.price }}
                        <span class="product__item__origin">&yen;{{ item.oldPrice }}</span>
                    </p>
                </div>
                <div class="product__number">
                    <span 
                      @click="()=>{chageCartItemInfo(shopId, item._id, item, -1)}"
                      class="product__number__minus">-</span>
                     {{ item.count || 0 }}
                    <span 
                      @click="()=>{chageCartItemInfo(shopId, item._id, item, 1)}"
                      class="product__number__add"
                      >+</span>
                </div>
            </div>
            
        </div>
    </div>
</template>

<script>
import { ref, toRefs, watchEffect } from 'vue'
import { useRoute } from 'vue-router'
import { useCommonCartEffect } from './commontCartEffect'
import { productsDetail } from '@/api/http'
//列表内容逻辑
const useGetDataEffect = (currentTab, shopId)=>{
    const lists = ref([])
    const getContentData = async ()=>{
        const res = await productsDetail(shopId, currentTab.value)
        lists.value = res
    }
    watchEffect(()=>{
        getContentData()
    })
    return { lists, currentTab }
}

//点击tab逻辑
const useClickEffect = ()=>{
     const currentTab = ref(cateories[0].tab)
     const handleCategoryClick = (tab)=>{
        currentTab.value = tab
    }
    return { handleCategoryClick, currentTab }
}

 const cateories = [
    { name: '全部商品', tab: 'all' }, 
    { name: '秒杀', tab: 'seckill' }, 
    { name: '新鲜水果', tab: 'fruit' }
]


export default {
    name: 'Content',
    props:['id'],
    setup() {
        const route = useRoute()
        const shopId = route.params.id
        const { handleCategoryClick, currentTab } = useClickEffect()
        const { lists } = useGetDataEffect(currentTab, shopId)
        const { chageCartItemInfo } = useCommonCartEffect()
        return { chageCartItemInfo, cateories, currentTab, lists, handleCategoryClick, shopId }
    }
}
</script>

<style lang="scss" scoped>
@import '../../style/viriables.scss';
@import '../../style/mixmins.scss';
.content {
    display: flex;
    position: absolute;
    left: 0;
    right: 0;
    top:1.5rem;
    bottom: .5rem;
}
.category{
    overflow-y: auto;
    width: .76rem;
    height: 100%;
    background:$input-bgColor;
    &__item {
        line-height: .4rem;
        text-align: center;
        font-size: .14rem;
        color: $content-fontcolor;
        &--acttive{
            background: $bgColor;
        }
    }
}
.product{
   flex: 1;
   overflow-y: auto;
   &__item{
       position: relative;
       display: flex;
       padding: .12rem 0;
       margin: 0 .16rem;
       border-bottom: 1px solid $content-bgColor;
       &__img{
           width: .68rem;
           height: .68rem;
           margin-right: .16rem;
       }
       &__detail {
           overflow: hidden;
       }
       &__title {
           margin: 0;
           line-height: .2rem;
           font-size: .14rem;
           color: $content-fontcolor;
           @include ellipsis;
       }
       &__sales{
           margin:.06rem 0;
           line-height: .16rem;
           font-size: .12rem;
           color: $content-fontcolor;
       }
       &__price{
           margin: 0;
           line-height: .2rem;
           font-size: .14rem;
           color: $hightlight-fontColor;
       }
       &__yen{
           font-size: .12rem;
       }
       &__origin{
           margin-left: .16rem;
          line-height: .2rem;
           font-size: .12rem;
           color: $light-fontcolor;
           text-decoration: line-through;
       }
       .product__number{
           position: absolute;
           right: 0;
           bottom: .12rem;
           &__minus,
           &__add
           {
               display: inline-block;
               width: .2rem;
               height: .2rem;
               border-radius: 50%;
               line-height: .16rem;
               font-size: .2rem;
               text-align: center;
           }
            &__minus{
                border:0.01rem solid $medium-fontcolor;
                color: $medium-fontcolor;
                margin-right: 0.05rem;
            }
            &__add{
                margin-left: 0.05rem;
                background: $btn-bgColor;
                color: $bgColor;
            }
       }
   }
}
</style>
